import React,{useState,useCallback,memo,useRef,useMemo} from 'react'  //函数组件中使用状态引入useState   useCallback帮助缓存一个函数
import Input from './Input'
import List from './List'
/*-----------------------------------------------------------*/
//class 类组件的声明不需要const
class A{
    a = 100
    fn =() =>{}
}
/*-----------------------------------------------------------*/
/*-----------------------------------------------------------*/
//函数组件的声明
let num = 1000;  //声明变量  要有关键字
const num2 = 1000;

//memo 对组件的属性进行比较，如果一样，不render
const Header=memo((props)=>{
    return (
        <h1>todolist{props.title}</h1>
    )
})


//函数组件  变的地方需要一个状态
const Todolist2 = () => {
    //第0项是状态 第1项是更新状态的方法 (在函数组件中声明状态)
    //函数组件中声明状态用的是 useState 里面是默认的初始值
    const [list, setList] = useState([]) 

    const val = useMemo(
        () => {console.log('useMemo');
            return 100;
        }, 
        []
    )    

    const myref = useRef();  //不变的地址,但是在这个函数内可以多次执行
    myref.current = list;
    //在函数组件中声明函数
    //只有父组件有更新状态，然后传给子组件   e是事件对象
    const addItem =useCallback(
        (e)=>{
            if(e.keyCode == 13){
                setList([{title:e.target.value, id:Date.now()}, ...myref.current]);
                //setList 函数内可以传一个回调函数，回调函数的参数是前一个状态的值
                //setList((a)=>[{title:e.target.value, id:Date.now()}, ...a]);
            }
        },
        []
    )
    
    return (
        <div>
            <h1>TodoList</h1> 
            <Header title='memo' />
            <Input addItem={addItem}/>
            {/* 属性名（随意取）= {变量名} */}
            <List list = {list} />  
        </div>
    )
}

export default Todolist2
